<template>
	<view class="container">
		<!-- 备案号（固定在搜索框下方，不随滚动） -->
		<view class="icp-record">
			<text>湘ICP备2025143406号-1</text>
		</view>
		<!-- 固定搜索框 -->
		<view class="search-box">
			<u-search v-model="searchText" placeholder="搜索URL或描述" :show-action="false" bg-color="#ffffff"
				@search="handleSearch"></u-search>
		</view>
		<!-- URL列表 -->
		<scroll-view scroll-y class="list-container" @scrolltolower="loadMore">
			<view v-for="(item, index) in filteredList" :key="index" class="url-card" @click="gotoIp(item)">
				<view class="card-content">
					<view class="card-header">
						<text class="title">{{ item.urlDesc || '未命名链接' }}</text>
						<u-icon name="cut" color="#2979ff" size="36" @tap.native.stop="copyUrl(item.sourceUrl)"></u-icon>
					</view>
					<text class="url">{{ item.sourceUrl }}</text>
					<view class="card-footer">
						<text class="click-count">
							<u-icon name="eye" size="26" color="#909399"></u-icon>
							{{ item.accCount }}
						</text>
						<text class="create-time">
							<u-icon name="calendar" size="26" color="#909399"></u-icon>
							{{ formatDate(item.createTime) }}
						</text>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<u-loadmore :status="loadingStatus" :load-text="{
			  loadmore: '上拉加载更多',
			  loading: '正在加载...',
			  nomore: '没有更多了'
			}" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				urlList: [],
				filteredList: [],
				page: 1,
				pageSize: 10,
				loadingStatus: 'nomore'
			}
		},
		onShow() {
			this.getUrlList()
		},
		methods: {
			gotoIp(row){
				try {
					uni.setStorageSync('URLDETAIL', JSON.stringify(row));
				} catch (e) {
					// error
				}
				uni.navigateTo({
					url: '/pages/index/index-ip'
				})
			},
			async getUrlList() {
				this.$api.user.queryTrans().then(res => {
					console.log(res);
					this.urlList = res;
					this.filteredList = [...this.urlList]
				});
				
			},
			handleSearch() {
				if (!this.searchText.trim()) {
					this.filteredList = [...this.urlList]
					return
				}
				this.filteredList = this.urlList.filter(item =>
					(item.urlDesc && item.urlDesc.includes(this.searchText)) ||
					item.url.includes(this.searchText)
				)
			},
			loadMore() {
				if (this.loadingStatus === 'nomore') return
				this.page++
				this.getUrlList()
			},
			formatDate(timestamp) {
				const date = new Date(timestamp)
				return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
			},
			copyUrl(url) {
				uni.setClipboardData({
					data: url,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body{
		height: 100%;
	}
	.container {
		height: 100%;
		background-color: #f5f7fa;
		padding: 20rpx;

		.search-box {
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 10rpx; /* 减少底部间距，让备案号更贴近搜索框 */
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}
		
		/* 备案号样式 */
		.icp-record {
			text-align: center;
			padding: 5rpx 0 15rpx; /* 上下小间距，更紧凑 */
			font-size: 22rpx; /* 较小字号 */
			color: #a0a0a0; /* 偏灰色 */
			/* 固定定位，不随列表滚动 */
			position: relative;
			z-index: 10;
		}

		.list-container {
			/* 调整列表高度，适配新增的备案号区域 */
			height: calc(100% - 160rpx);

			.url-card {
				background-color: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
				}

				.card-content {
					.card-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #303133;
							flex: 1;
						}
					}

					.url {
						display: block;
						font-size: 26rpx;
						color: #606266;
						margin-bottom: 20rpx;
					}

					.card-footer {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: #909399;

						.click-count,
						.create-time {
							display: flex;
							align-items: center;

							.u-icon {
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>